<template>
  <div class="layout">
    <div class="layout-content">
      <Row style="height: 100%">
        <i-col span="3" style="height: 100%">
          <Menu active-name="0-0" width="auto" :open-names="[0]">
            <Submenu
              v-for="(menuItem, idx) in aMenu"
              :key="'menu' + idx"
              :name="idx"
            >
              <template slot="title">
                <Icon :type="menuItem.ico"></Icon>
                {{ menuItem.name }}
              </template>
              <Menu-item
                v-for="(child, idxChild) in menuItem.children"
                :key="'child' + idxChild"
                :name="idx + '-' + idxChild"
                @click.native="fClickMenu(child, idxChild)"
                >{{ child.name }}</Menu-item
              >
            </Submenu>
          </Menu>
        </i-col>
        <i-col span="21" style="height: 100%">
          <div class="layout-content-main" style="height: 100%">
            <!-- 内容区域 -->
            <router-view />
          </div>
        </i-col>
      </Row>
    </div>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      aMenu: [
        //菜单
        {
          name: "工作表",
          ico: "ios-navigate",
          children: [
            // yzq-start
            { name: "导入/导出excel", path: "/importSheet" },
            // { name: "导入/导出excel", path: "/importAndExportExcel" },
            { name: "sheet新增/删除", path: "/addAndDelSheet" },
            { name: "sheet修改名称", path: "/editSheetName" },
            { name: "锁定sheet", path: "/lockSheet" },
            { name: "sheet状态", path: "/sheetState" },
            { name: "初始化指定行/列数", path: "/initRowAndCol" },
            { name: "滚动条位置", path: "/scroll" },
            { name: "插入行/列数", path: "/insertRowAndCol" },
            { name: "删除行/列数", path: "/delRowAndCol" },
            // yzq-end
            // fy-start
            { name: "隐藏行", path: "/hideRow" },
            { name: "隐藏列", path: "/hideColumn" },
            { name: "显示行", path: "/showRow" },
            { name: "显示列", path: "/showColumn" },
            { name: "冻结行", path: "/setHorizontalFrozen" },
            { name: "冻结列", path: "/setVerticalFrozen" },
            { name: "设置行高", path: "/setRowHeight" },
            { name: "设置列宽", path: "/setColumnWidth" }
            //fy-end
          ]
        },
        {
          name: "单元格",
          ico: "ios-keypad",
          children: [
            // fy-start
            { name: "单元格类型", path: "/setCellFormatCt" },
            { name: "显示文本", path: "/showCellText" },
            { name: "原始值", path: "/originValue" },
            { name: "单元格隐藏属性", path: "/hideTag" },
            { name: "单元格字体", path: "/setCellFormatFf" },
            { name: "单元格颜色", path: "/setCellFormatBg" },
            { name: "对齐方式", path: "/setCellFormatAlign" },
            { name: "合并单元格", path: "/mergeCell" },
            //fy-end
            // yzq-start
            // { name: "单元格", path: "/cell" },
            { name: "设置/清除/删除单元格值", path: "/cellValue" },
            { name: "单元格公式", path: "/cellFunc" },
            { name: "单元格批注", path: "/setCellFormatPs" },
            { name: "自定义公式", path: "/cellDefinedFunc" },
            { name: "设置单元格格式", path: "/setCellFormat" },
            { name: "查找单元格", path: "/find" },
            { name: "替换单元格内容", path: "/replace" },
            { name: "锁定单元格", path: "/lockCell" }
            // yzq-end
          ]
        },
        {
          name: "事件",
          ico: "ios-more",
          children: [
            { name: "单击单元格", path: "/cellMousedown" },
            { name: "双击单元格", path: "/dbClickCell" },
            { name: "自定义右键菜单", path: "/defRightMenu" },
            // { name: "打印", path: "" }
          ]
        }
      ]
    };
  },
  methods: {
    //点击菜单
    fClickMenu(item, idx) {
      this.$router.push({ path: item.path });
    }
  },
  mounted() {
    // 初始化表格
    this.$router.push({ path: "/importSheet" });
  }
};
</script>
<style scoped>
.layout {
  width: 100%;
  height: 100%;
  border: 1px solid #d7dde4;
  background: #f5f7f9;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
}
.layout-assistant {
  width: 300px;
  margin: 0 auto;
  height: inherit;
}
.layout-breadcrumb {
  padding: 10px 15px 0;
}
.layout-content {
  height: 100%;
  padding: 15px;
  overflow: hidden;
  background: #fff;
  border-radius: 4px;
}
.layout-content-main {
  padding: 10px;
}
.layout-copy {
  text-align: center;
  padding: 10px 0 20px;
  color: #9ea7b4;
}
.ivu-menu {
  height: 100%;
}
</style>
